<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直播销售评论管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .comment-appear {
                animation: fadeIn 0.3s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0A44CC 100%);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-comments text-primary text-xl"></i>
                <h1 class="text-xl font-bold text-primary">直播销售评论管理</h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索评论..." class="pl-9 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all w-48 md:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <div class="flex items-center space-x-2">
                    <img src="https://picsum.photos/id/1005/200/200" alt="管理员头像" class="w-8 h-8 rounded-full object-cover">
                    <span class="hidden md:inline font-medium">管理员</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-primary">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">今日评论</p>
                        <h3 class="text-2xl font-bold mt-1">1,286</h3>
                        <p class="text-success text-xs mt-1 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 12.5% 较昨日
                        </p>
                    </div>
                    <div class="bg-primary/10 p-3 rounded-lg">
                        <i class="fa fa-comment text-primary text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-secondary">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">待审核评论</p>
                        <h3 class="text-2xl font-bold mt-1">42</h3>
                        <p class="text-danger text-xs mt-1 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 5.2% 较昨日
                        </p>
                    </div>
                    <div class="bg-secondary/10 p-3 rounded-lg">
                        <i class="fa fa-clock-o text-secondary text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-warning">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">负面评论</p>
                        <h3 class="text-2xl font-bold mt-1">18</h3>
                        <p class="text-success text-xs mt-1 flex items-center">
                            <i class="fa fa-arrow-down mr-1"></i> 8.3% 较昨日
                        </p>
                    </div>
                    <div class="bg-warning/10 p-3 rounded-lg">
                        <i class="fa fa-frown-o text-warning text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-success">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">互动率</p>
                        <h3 class="text-2xl font-bold mt-1">46.8%</h3>
                        <p class="text-success text-xs mt-1 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 3.2% 较昨日
                        </p>
                    </div>
                    <div class="bg-success/10 p-3 rounded-lg">
                        <i class="fa fa-thumbs-up text-success text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 评论分析图表 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <div class="bg-white rounded-xl shadow-sm p-4 lg:col-span-2">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold">评论趋势</h3>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 text-xs rounded-full bg-primary/10 text-primary">今日</button>
                        <button class="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-600">本周</button>
                        <button class="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-600">本月</button>
                    </div>
                </div>
                <div class="h-80">
                    <canvas id="commentsChart"></canvas>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold">评论情感分析</h3>
                    <button class="text-primary text-sm hover:underline">查看详情</button>
                </div>
                <div class="h-80">
                    <canvas id="sentimentChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 评论管理区域 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-4 border-b border-gray-100 flex flex-col md:flex-row md:items-center justify-between gap-3">
                <h3 class="font-semibold">评论列表</h3>
                <div class="flex flex-wrap gap-2">
                    <div class="relative">
                        <select class="pl-3 pr-8 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all appearance-none bg-white">
                            <option>全部状态</option>
                            <option>已通过</option>
                            <option>待审核</option>
                            <option>已屏蔽</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>
                    <div class="relative">
                        <select class="pl-3 pr-8 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all appearance-none bg-white">
                            <option>全部商品</option>
                            <option>2025款旗舰智能手机</option>
                            <option>透明硅胶手机保护壳</option>
                            <option>无线充电器</option>
                            <option>蓝牙耳机</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>
                    <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center space-x-1">
                        <i class="fa fa-refresh"></i>
                        <span>刷新</span>
                    </button>
                </div>
            </div>
            
            <!-- 评论列表 -->
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-gray-50 text-left">
                            <th class="p-4 text-xs font-medium text-gray-500 uppercase tracking-wider">评论内容</th>
                            <th class="p-4 text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                            <th class="p-4 text-xs font-medium text-gray-500 uppercase tracking-wider">商品</th>
                            <th class="p-4 text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                            <th class="p-4 text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="p-4 text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <!-- 评论项1 -->
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="p-4 max-w-xs">
                                <div class="flex items-start space-x-3">
                                    <div class="flex">
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                    </div>
                                    <p class="text-sm">这款手机的拍照效果真的太棒了，特别是夜景模式，超出了我的预期！电池续航也很给力，充一次电可以用一整天。客服态度也非常好，解答很专业。强烈推荐！</p>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/1027/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                    <span class="text-sm">李明</span>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/96/100/100" alt="商品图片" class="w-10 h-10 rounded object-cover">
                                    <span class="text-sm">2025款旗舰智能手机</span>
                                </div>
                            </td>
                            <td class="p-4 text-sm text-gray-500">2025-06-06 10:23</td>
                            <td class="p-4">
                                <span class="text-xs bg-success/10 text-success px-2 py-1 rounded-full">已通过</span>
                            </td>
                            <td class="p-4">
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary" title="回复">
                                        <i class="fa fa-reply"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-warning" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger" title="屏蔽">
                                        <i class="fa fa-ban"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- 评论项2 -->
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="p-4 max-w-xs">
                                <div class="flex items-start space-x-3">
                                    <div class="flex">
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star-half-o text-warning"></i>
                                        <i class="fa fa-star-o text-warning"></i>
                                    </div>
                                    <p class="text-sm">手机整体性能不错，但感觉有点重，长时间握持不太舒服。另外，充电速度没有宣传的那么快，希望后续能通过系统更新优化一下。</p>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/1012/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                    <span class="text-sm">王小红</span>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/96/100/100" alt="商品图片" class="w-10 h-10 rounded object-cover">
                                    <span class="text-sm">2025款旗舰智能手机</span>
                                </div>
                            </td>
                            <td class="p-4 text-sm text-gray-500">2025-06-06 09:47</td>
                            <td class="p-4">
                                <span class="text-xs bg-success/10 text-success px-2 py-1 rounded-full">已通过</span>
                            </td>
                            <td class="p-4">
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary" title="回复">
                                        <i class="fa fa-reply"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-warning" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger" title="屏蔽">
                                        <i class="fa fa-ban"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- 评论项3（待审核） -->
                        <tr class="hover:bg-gray-50 transition-colors bg-warning/5">
                            <td class="p-4 max-w-xs">
                                <div class="flex items-start space-x-3">
                                    <div class="flex">
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star-o text-warning"></i>
                                        <i class="fa fa-star-o text-warning"></i>
                                    </div>
                                    <p class="text-sm">刚收到货，包装很精美，手机外观也很漂亮。但是开机后发现屏幕有一个亮点，不知道算不算质量问题，希望能给我处理一下。</p>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/1025/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                    <span class="text-sm">张伟</span>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/96/100/100" alt="商品图片" class="w-10 h-10 rounded object-cover">
                                    <span class="text-sm">2025款旗舰智能手机</span>
                                </div>
                            </td>
                            <td class="p-4 text-sm text-gray-500">2025-06-06 08:15</td>
                            <td class="p-4">
                                <span class="text-xs bg-warning/10 text-warning px-2 py-1 rounded-full">待审核</span>
                            </td>
                            <td class="p-4">
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-success" title="通过">
                                        <i class="fa fa-check"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger" title="屏蔽">
                                        <i class="fa fa-ban"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary" title="回复">
                                        <i class="fa fa-reply"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- 评论项4（负面） -->
                        <tr class="hover:bg-gray-50 transition-colors bg-danger/5">
                            <td class="p-4 max-w-xs">
                                <div class="flex items-start space-x-3">
                                    <div class="flex">
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star-o text-warning"></i>
                                        <i class="fa fa-star-o text-warning"></i>
                                        <i class="fa fa-star-o text-warning"></i>
                                        <i class="fa fa-star-o text-warning"></i>
                                    </div>
                                    <p class="text-sm">太差劲了！买了不到一周就出现死机的情况，联系客服态度也不好，一直推脱责任，让我自己去售后检测。这是我买过最差的手机，强烈建议大家不要购买！</p>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/1066/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                    <span class="text-sm">刘芳</span>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/96/100/100" alt="商品图片" class="w-10 h-10 rounded object-cover">
                                    <span class="text-sm">2025款旗舰智能手机</span>
                                </div>
                            </td>
                            <td class="p-4 text-sm text-gray-500">2025-06-05 16:32</td>
                            <td class="p-4">
                                <span class="text-xs bg-danger/10 text-danger px-2 py-1 rounded-full">已标记</span>
                            </td>
                            <td class="p-4">
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary" title="回复">
                                        <i class="fa fa-reply"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-warning" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger" title="屏蔽">
                                        <i class="fa fa-ban"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- 评论项5 -->
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="p-4 max-w-xs">
                                <div class="flex items-start space-x-3">
                                    <div class="flex">
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star-half-o text-warning"></i>
                                    </div>
                                    <p class="text-sm">这个保护壳很贴合，透明度也很高，不会发黄。唯一的缺点是有点容易沾指纹，不过这也是硅胶材质的通病了。总体来说很满意，值得购买。</p>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/1074/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                    <span class="text-sm">赵强</span>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center space-x-2">
                                    <img src="https://picsum.photos/id/160/100/100" alt="商品图片" class="w-10 h-10 rounded object-cover">
                                    <span class="text-sm">透明硅胶手机保护壳</span>
                                </div>
                            </td>
                            <td class="p-4 text-sm text-gray-500">2025-06-05 14:08</td>
                            <td class="p-4">
                                <span class="text-xs bg-success/10 text-success px-2 py-1 rounded-full">已通过</span>
                            </td>
                            <td class="p-4">
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary" title="回复">
                                        <i class="fa fa-reply"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-warning" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger" title="屏蔽">
                                        <i class="fa fa-ban"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <div class="p-4 border-t border-gray-100 flex flex-col md:flex-row md:items-center justify-between gap-3">
                <div class="text-sm text-gray-500">
                    显示 1 至 5 条，共 1286 条
                </div>
                <div class="flex items-center space-x-1">
                    <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fa fa-chevron-left text-xs"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50">2</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50">3</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50">4</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50">5</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50">
                        <i class="fa fa-chevron-right text-xs"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2025 直播销售评论管理系统 | 评论审核时间: 9:00-22:00</p>
        </div>
    </footer>

    <!-- 回复评论模态框 -->
    <div id="reply-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
        <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold">回复评论</h3>
                <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="mb-4">
                <p class="text-sm text-gray-600">用户评论：</p>
                <div class="bg-gray-50 p-3 rounded-lg mt-2 text-sm">
                    <p>刚收到货，包装很精美，手机外观也很漂亮。但是开机后发现屏幕有一个亮点，不知道算不算质量问题，希望能给我处理一下。</p>
                </div>
            </div>
            <div class="mb-4">
                <textarea placeholder="输入回复内容..." class="w-full p-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all resize-none h-32"></textarea>
            </div>
            <div class="flex justify-end space-x-2">
                <button onclick="closeModal()" class="px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">取消</button>
                <button class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors">发布回复</button>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 评论趋势图表
            const commentsCtx = document.getElementById('commentsChart').getContext('2d');
            new Chart(commentsCtx, {
                type: 'line',
                data: {
                    labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
                    datasets: [
                        {
                            label: '评论数量',
                            data: [32, 18, 45, 120, 210, 180, 165, 95],
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            fill: true,
                            tension: 0.4,
                            borderWidth: 2,
                            pointBackgroundColor: '#fff',
                            pointBorderColor: '#165DFF',
                            pointBorderWidth: 2,
                            pointRadius: 4,
                            pointHoverRadius: 6
                        },
                        {
                            label: '互动数量',
                            data: [12, 8, 25, 60, 110, 95, 85, 50],
                            borderColor: '#0FC6C2',
                            backgroundColor: 'rgba(15, 198, 194, 0.1)',
                            fill: true,
                            tension: 0.4,
                            borderWidth: 2,
                            pointBackgroundColor: '#fff',
                            pointBorderColor: '#0FC6C2',
                            pointBorderWidth: 2,
                            pointRadius: 4,
                            pointHoverRadius: 6
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                usePointStyle: true,
                                boxWidth: 6
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#1D2129',
                            bodyColor: '#1D2129',
                            borderColor: '#E5E6EB',
                            borderWidth: 1,
                            padding: 12,
                            boxPadding: 6,
                            usePointStyle: true,
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.raw;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                borderDash: [2, 2]
                            }
                        }
                    }
                }
            });
            
            // 情感分析图表
            const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
            new Chart(sentimentCtx, {
                type: 'doughnut',
                data: {
                    labels: ['正面', '中性', '负面'],
                    datasets: [{
                        data: [78, 15, 7],
                        backgroundColor: [
                            '#00B42A',
                            '#86909C',
                            '#F53F3F'
                        ],
                        borderWidth: 0,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                boxWidth: 6,
                                padding: 15
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#1D2129',
                            bodyColor: '#1D2129',
                            borderColor: '#E5E6EB',
                            borderWidth: 1,
                            padding: 12,
                            boxPadding: 6,
                            usePointStyle: true,
                            callbacks: {
                                label: function(context) {
                                    return context.label + ': ' + context.raw + '%';
                                }
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
            
            // 初始化模态框动画
            const replyModal = document.getElementById('reply-modal');
            const modalContent = document.getElementById('modal-content');
            
            // 回复按钮点击事件
            const replyButtons = document.querySelectorAll('[title="回复"]');
            replyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    openModal();
                });
            });
        });
        
        // 打开模态框
        function openModal() {
            const replyModal = document.getElementById('reply-modal');
            const modalContent = document.getElementById('modal-content');
            
            replyModal.classList.remove('hidden');
            replyModal.classList.add('flex');
            
            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        }
        
        // 关闭模态框
        function closeModal() {
            const replyModal = document.getElementById('reply-modal');
            const modalContent = document.getElementById('modal-content');
            
            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
                replyModal.classList.remove('flex');
                replyModal.classList.add('hidden');
            }, 300);
        }
        
        // 模拟评论审核操作
        function approveComment(id) {
            // 这里是模拟通过评论的逻辑
            alert(`评论 ${id} 已通过审核`);
        }
        
        function blockComment(id) {
            // 这里是模拟屏蔽评论的逻辑
            if (confirm('确定要屏蔽这条评论吗？')) {
                alert(`评论 ${id} 已被屏蔽`);
            }
        }
    </script>
</body>
</html>
    